<template>
  <div id="setting">
    <van-nav-bar class="top" fixed placeholder title="设置">
      <template #left>
        <van-icon
          style="margin-left: 50px"
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
          @click="goto('/search')"
        />
        <van-icon
          style="margin-right: 50px"
          color="#666"
          name="shopping-cart-o"
          size="20"
          @click="goto('/cart')"
        />
      </template>
    </van-nav-bar>
    <van-cell class="user" center value="个人信息" is-link @click="$router.push('/userinfo')">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <div class="userinfo">
          <van-image
            round
            width="40px"
            height="40px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <span class="custom-title">{{userinfo.user_name}}</span>
        </div>
      </template>
    </van-cell>
    <div class="address">
      <van-cell title="我的地址" is-link value="" />
      <van-cell title="单元格" is-link value="" />
    </div>
    <div class="address">
      <van-cell title="账号管理" is-link value="" />
      <van-cell title="我的手机号" is-link value="" />
      <van-cell title="支付安全" is-link value="" />
      <van-cell title="在校大学生认证" is-link value="未认证" />
    </div>
    <div class="address">
      <van-cell title="消息推送通知" is-link value="已开启" />
      <van-cell
        title="个性化服务"
        is-link
        label="关闭后，将不会使用你的个性信息为你提供个性化服务"
      >
        <template #right-icon>
          <van-switch v-model="checked" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <van-cell title="清除缓存" is-link value="0.1M" />
      <van-cell title="意见反馈" is-link value="" />
      <van-cell title="关于严选" is-link value="" />
    </div>
    <van-button class="logout" @click="loginout" type="default" block>退出登录</van-button>
  </div>
</template>
<script>
import {mapMutations,mapState} from 'vuex'
export default {
  name: "Home",
  data() {
    return {
      checked:true
    };
  },
  created() {},
  methods: {
   
    ...mapMutations('user',['unlog']),
    loginout(){
      this.unlog(),
      this.$router.replace('/login')
    }
  },
  computed: {
     ...mapState('user',['userinfo']),
  },
};
</script>
<style lang="scss" scoped>
#setting {
  background-color: #eee;
  padding: 0px 10px;
}
.user {
  margin-top: 10px;
  border-radius: 10px;
  .userinfo {
    width: 120px;
    justify-content: space-between;
    display: flex;
    align-items: center;
    span{
      font-size: 16px;
      margin-left: 10px;
    }
  }
}

.address {
  margin-top: 10px;
  text-align: left;
  .van-cell:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .van-cell:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
.logout{
  margin-top: 10px;
  border-radius: 10px;
  margin-bottom: 50px;
}

</style>
